<template>
	<div class="wrap">
		<!-- 搜索条件 -->
		<!-- <el-form ref="form" :inline="true" size="small" :model="forms" class="form" label-width="100px">
			<el-form-item label="文章分类：" prop="acid">
				<el-select v-model="forms.acid" placeholder="请选择" style="width: 200px" clearable>
					<el-option label="全部" value="" />
					<el-option
						v-for="item in columnOptions"
						:key="item.id + item.acname"
						:label="item.acname"
						:value="item.id"
					/>
				</el-select>
			</el-form-item>
			<p class="line">
				<el-button icon="el-icon-search" type="primary" @click="loadData" size="small">
					搜索
				</el-button>
			</p>
		</el-form> -->
		<div class="answer-bot">
			<div style="padding-bottom: 10px">
				<el-button type="primary" plain @click="editDetails('add', {})" size="small">
					新增城市
				</el-button>
			</div>
			<el-table :data="tableData" stripe border size="small" style="margin-top: 5px">
				<el-table-column label="城市编号" prop="city_id" min-width="100px" align="center" />
				<el-table-column
					label="城市名称"
					prop="city_name"
					min-width="120px"
					show-overflow-tooltip
					align="center"
				/>
				<el-table-column
					label="城市地区"
					prop="city_region"
					min-width="120px"
					show-overflow-tooltip
					align="center"
				/>
				<el-table-column label="文章缩略图" min-width="130px" show-overflow-tooltip align="center">
					<template slot-scope="{ row }">
						<el-image
							v-if="row.city_img"
							style="width: 100px; height: 100px"
							:src="row.city_img"
							:preview-src-list="[row.city_img]"
						></el-image>
						<span v-else>未设置</span>
					</template>
				</el-table-column>
				<el-table-column
					label="创建时间"
					:formatter="row => row.add_time || '--'"
					min-width="160px"
					align="center"
				/>
				<el-table-column
					label="是否禁用"
					align="center"
					:formatter="row => (row.is_close == 1 ? '是' : '否')"
					min-width="160px"
				/>
				<el-table-column label="操作" width="120" align="center">
					<template slot-scope="scope">
						<el-link type="primary" :underline="false" @click="editDetails('edit', scope.row)">
							编辑
						</el-link>
						<el-link type="primary" :underline="false" @click="handleDelete(scope.row)">
							删除
						</el-link>
					</template>
				</el-table-column>
			</el-table>
			<el-row type="flex" justify="center">
				<el-col :span="24" style="text-align: right">
					<Pagination
						:total="total"
						:page.sync="pageNo"
						:limit.sync="pageSize"
						scroll-el="el-main"
						@pagination="pageChange"
					/>
				</el-col>
			</el-row>
		</div>
		<add-article ref="refAccountDetails" />
	</div>
</template>

<script>
	import { cityLists, cityDelete } from '@/api/competition-manage'
	import Pagination from '@/components/Pagination'
	import AddArticle from './components/add-article'
	export default {
		components: {
			Pagination,
			AddArticle
		},
		data() {
			return {
				forms: {
					acid: '',
					is_check: ''
				},
				pageNo: 1,
				pageSize: 10,
				total: 0,
				tableData: []
			}
		},
		created() {
			this.loadData()
		},
		methods: {
			editDetails(type, row) {
				this.$refs.refAccountDetails.initData(type, row)
			},
			// 搜索
			searchData() {
				this.pageNo = 1
				this.loadData()
			},
			// 分页
			pageChange({ page, limit }) {
				this.pageNo = page
				this.pageSize = limit
				this.loadData()
			},
			loadData() {
				const loading = this.$setLoading()
				this.tableData = []
				cityLists({
					p: this.pageNo,
					size: this.pageSize
				}).then(
					res => {
						this.tableData = res.data.lists
						this.total = Number(res.data.total)
						loading.close()
					},
					err => {
						loading.close()
					}
				)
			},
			handleDelete(row) {
				this.$confirm(`确定要删除 ”${row.city_name}“ 城市信息吗?`, '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消'
				})
					.then(async () => {
						const res = await cityDelete({ city_id: row.city_id })
						this.loadData()
						this.$message({
							type: 'success',
							message: '删除成功'
						})
					})
					.catch(err => {
						console.log(err)
					})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.el-link {
		margin: 0 5px;
		font-size: 14px;
	}
	.form {
		background: #ffffff;
		padding: 24px 10px 0;
		margin-bottom: 10px;
		border-radius: 2px;
		display: flex;
		flex-wrap: wrap;
	}
	.line {
		height: 36px;
		margin: 0 0 10px 18px;
		border-left: 1px solid #e5e6eb !important;
		padding: 0 0 0 18px;
	}
	.answer-bot {
		padding: 16px;
		border-radius: 2px;
		background-color: #ffffff;
		.bot-title {
			font-size: 16px;
			font-family: PingFangSC-Regular, PingFang SC;
			color: #000000;
		}
	}
</style>
